import React, { Component } from 'react';
import { useParams } from 'react-router';

// 传递params参数, v6需要封装, hoc高阶组件, 利用useParams()钩子获取参数, 传递给class组件
function myWithRouter(Details) {
    return (props) => {
        return <Details_param {...props} params={useParams()} />
    }
}
const detailData = [
    { id: '01', content: 'Detail_param-1' },
    { id: '02', content: 'Detail_param-2' },
    { id: '03', content: 'Detail_param-3' }
];
class Details_param extends Component {
    render() {
        // console.log(this.props);
        const { params: { id, title } } = this.props;
        const res = detailData.find(detailDataObj => detailDataObj.id === id);
        return (
            <div>
                <ul>
                    <li>ID:{id}</li>
                    <li>TITLE:{title}</li>
                    <li>CONTENT:{res.content}</li>
                </ul>
            </div>
        );
    }
}

export default myWithRouter(Details_param);